<template>
    <div>
        <div>
            <el-row>
                <el-button type="primary" @click="addClick()" round>新增用户</el-button>
            </el-row>
        </div>
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="posList" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="账号" value="adminName"></el-option>
                    <el-option label="姓名" value="name"></el-option>
                    <el-option label="手机号" value="phone"></el-option>
                </el-select>
                <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <el-table :data="tableData" border max-height="800" style="width: 100%">
            <el-table-column prop="adminName" label="账号" width="165"></el-table-column>
            <el-table-column prop="adminPassword" label="密码" width="165"></el-table-column>
            <el-table-column prop="phone" label="手机号" width="165"></el-table-column>
            <el-table-column prop="Email" label="邮箱" width="165"></el-table-column>
            <el-table-column prop="name" label="姓名" width="165"></el-table-column>
            <el-table-column prop="role" label="角色" width="165"></el-table-column>
            <el-table-column prop="state" label="状态" width="165"></el-table-column>
            <el-table-column fixed="right" label="操作" width="90">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button
                        @click="handleDelete(scope.$index, scope.row)"
                        type="text"
                        size="small"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div> -->
        <!-- 修改 -->
        <div>
            <template>
                <el-dialog title="修改" :visible="dialogFormVisible" :before-close="handleClose">
                    <div slot="header" class="clearfix">
                        <span>编辑信息</span>
                    </div>
                    <div class="text item">
                        <el-form ref="ruleForm" class="demo-ruleForm">
                            <el-form-item label="账号：" prop="adminName">
                                <el-input
                                    v-model="ruleForm.adminName"
                                    autocomplete="off"
                                    placeholder="请输入账号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="密码：" prop="adminPassword">
                                <el-input
                                    v-model="ruleForm.adminPassword"
                                    autocomplete="off"
                                    placeholder="请输入密码"
                                ></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="确认密码：" prop="adminPasswordQ">
                                <el-input
                                    v-model="ruleForm.adminPasswordQ"
                                    autocomplete="off"
                                    placeholder="请确认密码"
                                ></el-input>
                            </el-form-item> -->
                            <el-form-item label="手机号：" prop="phone">
                                <el-input
                                    v-model="ruleForm.phone"
                                    autocomplete="off"
                                    placeholder="请输入手机号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱：" prop="Email">
                                <el-input
                                    v-model="ruleForm.Email"
                                    autocomplete="off"
                                    placeholder="请输入邮箱"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="姓名：" prop="name">
                                <el-input
                                    v-model="ruleForm.name"
                                    autocomplete="off"
                                    placeholder="请输入姓名"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="角色：" prop="role">
                                <el-radio v-model="ruleForm.role" label="0" :checked="role=='0'?true:false"  role="0" >平台管理员</el-radio>
                                <el-radio v-model="ruleForm.role" label="1" :checked="role=='1'?true:false"  role="1" >门店管理员</el-radio>
                                <el-radio v-model="ruleForm.role" label="2" :checked="role=='2'?true:false"  role="2">供应商管理员</el-radio>
                            </el-form-item>
                            <el-form-item label="状态：" prop="state">
                                <el-radio v-model="ruleForm.state" label="0" :checked="state=='0'?true:false"  state="0" >申请中</el-radio>
                                <el-radio v-model="ruleForm.state" label="1" :checked="state=='1'?true:false"  state="1" >可用</el-radio>
                                <el-radio v-model="ruleForm.state" label="2" :checked="state=='2'?true:false"  state="2">不可用</el-radio>
                            </el-form-item>
                            <!-- <el-form-item label="角色：" prop="role">
                                <el-select v-model="ruleForm.role" filterable placeholder="请选择">
                                  <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :ruleForm.role="item.value">
                                  </el-option>
                                </el-select>
                            </el-form-item> -->
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </template>
        </div>
        <!-- 新增 -->
        <div>
            <template>
                <el-dialog title="新增" :visible="addFormVisible" :before-close="handleClose">
                    <div slot="header" class="clearfix">
                        <span>编辑信息</span>
                    </div>
                    <div class="text item">
                        <el-form ref="ruleForm" class="demo-ruleForm">
                            <el-form-item label="账号" prop="adminName">
                                <el-input
                                    v-model="addForm.adminName"
                                    autocomplete="off"
                                    placeholder="请输入账号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="adminPassword">
                                <el-input
                                    v-model="addForm.adminPassword"
                                    autocomplete="off"
                                    placeholder="请输入密码"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="phone">
                                <el-input
                                    v-model="addForm.phone"
                                    autocomplete="off"
                                    placeholder="请输入手机号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="Email">
                                <el-input
                                    v-model="addForm.Email"
                                    autocomplete="off"
                                    placeholder="请输入邮箱"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input
                                    v-model="addForm.name"
                                    autocomplete="off"
                                    placeholder="请输入姓名"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="角色：" prop="role">
                                <el-radio v-model="addForm.role" label="0" :checked="role=='0'?true:false"  role="0" >平台管理员</el-radio>
                                <el-radio v-model="addForm.role" label="1" :checked="role=='1'?true:false"  role="1" >门店管理员</el-radio>
                                <el-radio v-model="addForm.role" label="2" :checked="role=='2'?true:false"  role="2">供应商管理员</el-radio>
                            </el-form-item>
                            <el-form-item label="状态：" prop="state">
                                <el-radio v-model="addForm.state" label="0" :checked="state=='0'?true:false"  state="0" >申请中</el-radio>
                                <el-radio v-model="addForm.state" label="1" :checked="state=='1'?true:false"  state="1" >可用</el-radio>
                                <el-radio v-model="addForm.state" label="2" :checked="state=='2'?true:false"  state="2">不可用</el-radio>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="addCancel">取 消</el-button>
                        <el-button type="primary" @click="addConfirm">确 定</el-button>
                    </div>
                </el-dialog>
            </template>
        </div>
    </div>
</template>

<script>
let _ = require('lodash');
import { loginAdmin,isAdmin,getAdmin, addAdmin, deleAdmin, UpdateAdmin,searchAdmin} from '../../../services/admin.js';
export default {
    methods: {
        handleClick(row) {
            console.log(row);
            this.ruleForm = row;
            this.dialogFormVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.delete(row._id);
              this.show();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        addClick() {
            this.addFormVisible = true;
        },
        async  handleSearch() {
            // console.log(this.select,this.posList);
            let data = {
                adminName:"",
                name:"",
                role:""
            };
            let newData ={};
            for (const key in data) {
                if (key == this.select) {
                    newData[key] = this.posList;
                }
            }
            console.log(newData,11);
            let date = await searchAdmin(newData);
            console.log(date);
            this.tableData = date;
            // for(let i=0;i<date.length;i++){
            //     if (this.tableData[i].role===0) {
            //         this.tableData[i].role="平台管理员"  
            //     }
            //     else if(this.tableData[i].role===1) {
            //         this.tableData[i].role="门店管理员"  
            //     }
            //     else if(this.tableData[i].role===2){
            //         this.tableData[i].role="供应商管理员"  
            //     }
            // }
            // for(let i=0;i<date.length;i++){
            //     if (this.tableData[i].state===0) {
            //         this.tableData[i].state="申请中"  
            //     }
            //     else if(this.tableData[i].state===1) {
            //         this.tableData[i].state="可用"  
            //     }
            //     else if(this.tableData[i].state=2) {
            //         this.tableData[i].state="不可用"  
            //     }
            // }
        },
        cancel() {
            console.log('取消');
            this.show();
            this.dialogFormVisible = false;
        },
        addCancel() {
            console.log('取消');
            this.show();
            this.addFormVisible = false;
        },
        confirm(val) {
            console.log(this.ruleForm,"this.ruleForm")
            this.update(this.ruleForm);
            this.show();
            this.dialogFormVisible = false;
        },
        addConfirm() {
            console.log(this.addForm);
            this.add(this.addForm);
            this.addForm={adminName: '',adminPassword: '',adminPasswordQ: '',phone: '',Email: '',name: '',role: '',state: ''},
            this.show();
            this.addFormVisible = false;
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
              this.dialogFormVisible=false;
            })
            .catch(_ => {});
            this.$confirm('确认关闭?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.dialogFormVisible=false;
              this.addFormVisible=false;
              this.$message({
                type: 'success',
                message: '关闭成功!',
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });          
            });
        },

        add: async data => {
            let res = await addAdmin(data);
        },
        update: async data => {
            console.log(data._id,data,"data._id,data")
            let res = await UpdateAdmin(data._id,data);
        },
        delete: async _id => {
            let res = await deleAdmin(_id);
        },
        show: async function() {
            let data = await getAdmin();
            console.log(data,"data");
            this.tableData = data; //将ajax返回来的值保存
            // for(let i=0;i<data.length;i++){
            //     if (this.tableData[i].role===0) {
            //         this.tableData[i].role="平台管理员"  
            //     }
            //     else if(this.tableData[i].role===1) {
            //         this.tableData[i].role="门店管理员"  
            //     }
            //     else if(this.tableData[i].role===2){
            //         this.tableData[i].role="供应商管理员"  
            //     }
            // }
            // for(let i=0;i<data.length;i++){
            //     if (this.tableData[i].state===0) {
            //         this.tableData[i].state="申请中"  
            //     }
            //     else if(this.tableData[i].state===1) {
            //         this.tableData[i].state="可用"  
            //     }
            //     else if(this.tableData[i].state=2) {
            //         this.tableData[i].state="不可用"  
            //     }
            // }
        }
    },
    created() {
        //生命周期方法  当初始化项目则调用渲染方法
        this.show();
    },
    data() {
        // var validatePassPasswordQ =async (rule, value, callback) => {
        //     if (value === '') {
        //         callback(new Error('请确认密码'));
        //     } else {
        //         if (!/^\d{6,}$/.test(value)) {
        //           callback(new Error("密码格式不正确"));
        //         }  else if (value !== this.ruleForm.adminPassword) {
        //           callback(new Error("两次输入密码不一致!"));
        //         } else {
        //           callback();
        //         }
        //     }
        // };
        return {
            dialogFormVisible: false,
            addFormVisible: false,
            ruleForm: {},
            addForm: {
                adminName: '',
                adminPassword: '',
                adminPasswordQ: '',
                phone: '',
                Email: '',
                name: '',
                role: '',
                state: '',

            },
            posList:'',
            select:'',
            role: '',
            state: '',
            // rules: {
            //     adminName: [{ required: true,message: '请输入账号', trigger: 'blur' }],
            //     adminPassword: [{ required: true,message: '请输入密码',trigger: 'blur' }],
            //     adminPasswordQ: [{ required: true,validator: validatePassPasswordQ, trigger: 'blur' }],
            //     phone: [{ required: true,message: '请输入电话', trigger: 'blur' }],
            //     Email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
            //     name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            //     role: [{ required: true, message: '请输入角色', trigger: 'blur' }],
            //     state: [{ required: true, message: '请输入角色', trigger: 'blur' }],
            // },
            tableData: [],
            options: [{
              value: '选项1',
              label: '平台管理员'
            }, {
              value: '选项3',
              label: '门店管理员'
            }, {
              value: '选项5',
              label: '供应商管理员'
            }],
            currentPage: 1
        };
    }
};
</script>

<style>
.avatar {
    width: 60px;
    height: 60px;
    display: block;
}
</style>